<template>
  <div>
    <top-tab-nav :list="topTabList" :current="current" @change="changeTab"></top-tab-nav>
    <scroll-view
      class="exhibition-ele"
      refresher-enabled
      scroll-y="true"
      @refresherrefresh="initData"
      :refresher-triggered="triggered"
      :style="{ height: screenHeight }"
      @scrolltolower="loadMore"
    >
      <div class="ul wrap">
        <div class="li" v-for="item in list" :key="item.id" @click="toExhibitionInfo(item.id)">
          <div class="img-box">
            <img class="img" mode="aspectFill" :src="ossDomain + item.coverImg" alt="" />
          </div>
          <div class="text-box">
            <div class="te">{{ item.name }}</div>
            <div class="te">{{ item.enName }}</div>
            <div class="te">{{ item.address }}</div>
            <div class="te">{{ item.enAddress }}</div>
          </div>
          <div class="date-price">
            <div class="te">¥ {{ getPriceList(item.priceList) }}</div>
            <div class="te">{{ formatTimeRange(item.startTime, item.endTime) }}</div>
          </div>
        </div>
      </div>
      <uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
    </scroll-view>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch, computed } from 'vue'
import { useStore } from 'vuex'
import { exhibitionList } from '@/utils/api/exhibition'
import { ossDomain } from '@/utils/oss'
import { formatTimeRange } from '@/utils/current'
const store = useStore()
const screenHeight = ref<number>(0)
const statusBarHeight = computed(() => store.getters['system/statusBarHeight'])
const bottomSafeArea = computed(() => store.getters['system/bottomSafeArea'])

// 页面高度-状态栏高度-底部安全区域-导航栏高度90rpx-顶部选项卡高度126rpx(有10rpx 是间距)-底部tabbar高度116rpx
screenHeight.value = `calc(100vh - ${statusBarHeight.value}px - ${bottomSafeArea.value}px - 90rpx - 126rpx - 116rpx)`

// triggered:刷新的状态
let triggered = ref<boolean>(false)
interface TabItem {
  id: number
  cn: string
  en: string
}
const current = ref<number>(0)

const topTabList = reactive<TabItem[]>([
  {
    cn: '展览',
    en: 'Exhibition',
    id: 1
  },
  {
    cn: '活动',
    en: 'Event',
    id: 2
  }
])

let list = ref<any[]>([])
let page: number = 1
let reload: boolean = true
let loading = ref<boolean>(false)
let noMore = ref<boolean>(false)

const loadData = async () => {
  triggered.value = true
  if (loading.value || noMore.value) {
    triggered.value = false
    return
  } else {
    loading.value = true
    const { code, data } = await exhibitionList({
      current: page,
      size: 10,
      type: topTabList[current.value].id
    })
    triggered.value = false
    loading.value = false
    if (reload) {
      list.value = data.list
      reload = false
    } else {
      list.value = [...list.value, ...data.list]
    }
    if (data.next) {
      page++
    } else {
      noMore.value = true
    }
  }
}
const initData = () => {
  page = 1
  reload = true
  noMore.value = false
  loadData()
}
const changeTab = (index: number) => {
  console.log(index)
  current.value = index
  initData()
}
const loadMore = () => {
  if (loading.value || noMore.value) return
  loading.value = true
  loadData()
}

const getPriceList = (data: any) => {
  // 不要删除两边的空格
  return data.map((item) => item.price).join(' / ')
}
const toExhibitionInfo = (id: any) => {
  uni.navigateTo({ url: '/pages/exhibitionInfo/exhibitionInfo?id=' + id })
}
onMounted(() => {
  initData()
})
</script>

<style lang="scss" scoped>
.exhibition-ele {
  background: #ececec;
  :deep(.uni-scroll-view-refresher) {
    background: #ececec !important;
  }
  .ul {
    .li {
      margin-bottom: 20rpx;
      .img-box {
        margin-bottom: 20rpx;
        .img {
          height: 400rpx;
        }
      }
      .text-box,
      .date-price {
        line-height: 44rpx;
        font-size: 32rpx;
        font-family: Helvetica;
        color: #000;
      }
      .date-price {
        margin-top: 44rpx;
      }
    }
  }
}
</style>
